<template>
    <div class="header-tittle">
        青岛地铁集团有限公司-智慧园区云服务综合管理平台
        <el-button type="primary" plain style="float:right;margin-top: 10px;margin-right: 2%" @click="dialogVisible1 = true">
            个人中心
        </el-button>
        <el-button type="primary" style="float:right;margin-top: 10px;margin-right: 2%">校时</el-button>
        <el-button type="primary" plain style="float:right;margin-top: 10px;margin-right: 2%" @click="dialogVisible = true">
            自定义风格
        </el-button>

        <el-dialog
            v-model="dialogVisible"
            width="500"
            :before-close="handleClose"
        >
            <img style="width: 450px; height: 300px" src="../assets/yangshi.png"/>
        </el-dialog>

        <el-dialog
            v-model="dialogVisible1"
            width="950"
            :before-close="handleClose"
        >
            <img style="width: 900px; height: 350px" src="../assets/gerenzhongxin.jpg"/>
        </el-dialog>

    </div>
</template>

<script setup>
import {ref} from "vue";

const dialogVisible = ref(false)
const dialogVisible1 = ref(false)
</script>

<style scoped>
.header-tittle {
    font-size: 20px;
    font-weight: bold;
    color: #hhh;
    padding-left: 20px;
    line-height: 7vh;
    background-color: #669900;
}
</style>